import PateoSearchForm from '@/components/common/PateoSearchForm';
import { filterAuth } from '@/support/common';
import { Button, Card, Checkbox, message, Table, TableColumnsType, TableProps } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import PateoAuthButtons from '@/components/common/PateoAuthButtons';
import { ColumnsType } from 'antd/es/table';
import { router } from 'umi';
import moment from 'moment';
import { DATE_HMS } from '@/support/constant/common';

@connect((state: any) => ({
  severDataType: state.severDataType,
  loading: state.loading.effects['severDataType/postFetchPage'],
  permissions: state.menu.permissions,
}))
export default class DataType extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
  };
  state = {
    formValues: {},
    formData: {},
    exportVisible: false,
    update: false,
    selectKeys: [] as string[],
    isImport: false,
    checkList: [] as any[],
  };
  componentDidMount() {
    this.fetchPage();
  }
  handleFormReset = () => {
    this.state.formValues = {};
    this.setState({ formValues: this.state.formValues });
  };
  closeModal = (refresh = false) => {
    this.setState({
      exportVisible: false,
      formData: {},
    });
    if (refresh) {
      const { formValues } = this.state;
      this.fetchPage(formValues);
    }
  };
  handleFreshPage = () => {
    this.fetchPage();
  };
  handleTableChange = (pagination: any, filters: any = {}) => {
    const { current, pageSize } = pagination;
    const params = {
      current,
      pagesize: pageSize,
      ...filters,
    };
    this.fetchPage(params);
  };
  fetchPage = (params = {}) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'severDataType/getFetchPage',
      payload: {
        url: '/api/ms-soa-service/v1/service/library/type/list',
        ...params,
        ...formValues,
      },
    });
  };
  render() {
    const { formData, isImport } = this.state;
    const {
      severDataType: {
        pageData: { list, pagination },
      },
      loading,
      dispatch,
      location,
    } = this.props;

    const columns: ColumnsType<any> = [
      {
        title: '数据类型名称',
        dataIndex: 'name',
        width: 150,
      },

      {
        title: '数据类型描述',
        dataIndex: 'desc',
        width: 150,
        ellipsis: true,
      },

      {
        title: '上次修改人员账号',
        dataIndex: 'updateName',
        width: 150,
        ellipsis: true,
      },
      {
        title: '上次修改时间',
        dataIndex: 'updateTime',
        width: 150,
        ellipsis: true,
        render: v => (v ? moment(v).format(DATE_HMS) : '--'),
      },
      {
        title: '操作',
        dataIndex: '操作',
        width: 120,
        fixed: 'right',
        render: (text: any, record: any) => {
          const btns = [
            {
              title: '查看',
              key: 'view',
              auth: 'dataType-opt',
              onConfirm: () => {
                router.push({
                  pathname: '/soaManage/serviceManage/serviceLibrary/viewDataType',
                  query: { id: record.id },
                });
              },
            },
            {
              title: '编辑',
              key: 'edit',
              auth: 'dataType-opt',
              onConfirm: () => {
                router.push({
                  pathname: '/soaManage/serviceManage/serviceLibrary/editDataType',
                  query: { id: record.id },
                });
              },
            },
            {
              title: '删除',
              key: 'del',
              auth: 'dataType-opt',
              message: '删除后服务将无法选择数据类型，确认删除？',
              Popconfirm: true,
              onConfirm: () => {
                dispatch({
                  type: 'severDataType/postObjWithRes',
                  payload: {
                    url: `/api/ms-soa-service/v1/service/library/type?typeId=${record.id}`,
                  },
                  callback: res => {
                    if (res.statusCode === '0') {
                      message.success('删除成功');
                      this.fetchPage();
                    }
                  },
                });
              },
            },
          ];
          return <PateoAuthButtons btns={btns} pathname={location.pathname} />;
        },
      },
    ];

    const paginationProps = {
      pageSizeOptions: [10, 20, 50],
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };
    const searchItems = [
      {
        type: 'input',
        title: '名称',
        key: 'name',
      },
    ];
    return (
      <div>
        <Card className="pd0" bordered={false}>
          {/* search form */}
          <PateoSearchForm
            onRef={(val: any) => (this.searchForm = val)}
            searchItems={searchItems}
            fetchParams={{
              type: 'severDataType/postFetchPage',
              url: '/api/ms-soa-service/v1/service/library/type/list',
              extraArgs: {},
            }}
            dispatchFn={this.fetchPage}
            saveFormValues={(val: any) => {
              this.setState({
                formValues: Object.assign(this.state.formValues, val),
              });
            }}
            handleFormReset={this.handleFormReset}
          />
        </Card>

        <Card className="pd0" bordered={false}>
          {/* add */}
          <div>
            {filterAuth('dataType-opt', this.props.permissions, this.props.location.pathname) ? (
              <div className="my_newItem">
                <div style={{ display: !isImport ? 'block' : 'none' }}>
                  <Button
                    type="primary"
                    size="small"
                    onClick={() => {
                      router.push('/soaManage/serviceManage/serviceLibrary/addDataType');
                    }}
                  >
                    新建
                  </Button>
                </div>
              </div>
            ) : null}
          </div>

          {/* table */}
          <Table
            size={'small'}
            rowKey={record => record.id}
            dataSource={list}
            loading={loading}
            columns={columns}
            pagination={paginationProps}
            onChange={this.handleTableChange}
            scroll={{ x: 'auto' }}
          />
        </Card>
        {/* <ExportModal modalVisible={exportVisible} closeModal={this.closeModal} /> */}
      </div>
    );
  }
}
